<template>
  <view class="tab">
    <view v-for="(item,index) in list" :key="index" class="tab-item" @click="switchTab(item, index)">
      <image class="tab_img" :src="currentIndex == index ? item.selectedIconPath : item.iconPath"></image>
      <view class="tab_text" :style="{color: currentIndex == index ? selectedColor : color}">{{item.text}}</view>
    </view>
  </view>

</template>

<script>
  export default {
    props: {
      selectedIndex: { // 当前选中的tab index
        type: Number,
        default: 0
      },
    },
    data() {
      return {
        color: "#AAAAAA",
        selectedColor: "#1071E7",
        list: [],
        currentIndex: 0,
      }
    },
    created() {
      this.currentIndex = this.selectedIndex;
      let _this = this;
      let userInfo = uni.getStorageSync('userInfo');
      // 运营者
      if (userInfo.is_operation == 1) {
        //角色1
        _this.list = [{
            "pagePath": "/pages/order/orderList",
            "iconPath": "/static/tabbar/home.png",
            "selectedIconPath": "/static/tabbar/home_active.png",
            "text": "派单大厅"
          },
          // {
          //   "pagePath": "/pages/statistic/pieChart",
          //   "iconPath": "/static/tabbar/stat.png",
          //   "selectedIconPath": "/static/tabbar/stat_active.png",
          //   "text": "统计"
          // },
          {
            "pagePath": "/pages/mine/index",
            "iconPath": "/static/tabbar/mine.png",
            "selectedIconPath": "/static/tabbar/mine_active.png",
            "text": "我的"
          }
        ]
      }
      // 商务
      if (userInfo.is_seller == 1) {
        //角色2
        _this.list = [{
            "pagePath": "/pages/order/takeOrderList",
            "iconPath": "/static/tabbar/home.png",
            "selectedIconPath": "/static/tabbar/home_active.png",
            "text": "接单大厅"
          },
          {
            "pagePath": "/pages/mine/index",
            "iconPath": "/static/tabbar/mine.png",
            "selectedIconPath": "/static/tabbar/mine_active.png",
            "text": "我的"
          }
        ]
      }
    },
    methods: {
      switchTab(item, index) {
        this.currentIndex = index;
        let url = item.pagePath;
        uni.redirectTo({
          url: url
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tab {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
    border-top: 2rpx solid #ccc;
    padding-top: 5rpx;
    z-index: 100000;

    .tab-item {
      flex: 1;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .tab_img {
        width: 50rpx;
        height: 50rpx;
      }

      .tab_text {
        font-size: 24rpx;
        margin-top: 9rpx;
      }
    }
  }
</style>